<template>
  <view class="parent-container">
    <view class="parent-header">
      <text class="title">父组件</text>
      <view class="input-group">
        <text>输入值：</text>
        <input 
          v-model="title" 
          placeholder="请输入传给子组件A的值" 
          class="input"
        />
      </view>
      <view class="callback-group">
        <text>回传值：</text>
        <text class="callback-value">{{ callBackValue }}</text>
      </view>
    </view>

   
    <comA :intent="title" class="child-component" />

   
    <comB @callBackFun="handleChildCallback" class="child-component" />
  </view>
</template>

<script>
// 引入子组件
import comA from '/pages/components/comA/comA.vue'
import comB from '/pages/components/comB/comB.vue'

export default {
  components: { comA, comB }, // 注册组件
  data() {
    return {
      title: "Hello", // 父组件要传给子A的值（默认Hello）
      callBackValue: "0595-2788888" // 接收子B回传的值（默认初始值）
    };
  },
  methods: {
    // 处理子组件B的回传值
    handleChildCallback(msg) {
      console.warn("父组件接收子B回传值：", msg);
      this.callBackValue = msg; // 更新父组件回显值
    }
  }
};
</script>

<style scoped>
.parent-container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.parent-header {
  background: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}
.input-group, .callback-group {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}
.input {
  flex: 1;
  border: 1px solid #eee;
  padding: 15rpx;
  border-radius: 5rpx;
  margin-left: 10rpx;
}
.callback-value {
  color: black;
  font-weight: bold;
  margin-left: 10rpx;
  font-size: 30rpx;
}
.child-component {
  background: #fff;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}
</style>